<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">
        <style>
            .ui-datatable table {
                border-collapse: collapse;
                width: 100%;
                border-color: grey;
            }
            .ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer {
                text-align: center;
                padding: 4px 10px 4px 160px;
            }
            .ui-inputfield, .ui-widget-content .ui-inputfield, .ui-widget-header .ui-inputfield {
                width: 60px;
            }
        </style>
        <h:form id="sfInfoForm">
            <p:panel header="Sales Forecast Basic Information">
                <p:messages showDetail="true"/>
                <h:panelGrid columns="4">
                    <h:outputLabel style="font-weight: bold" value="Date Updated: "/>
                    <h:outputText value="#{sfUpdateManagerBean.newUpdateIndivs.get(0).getFormattedDay()}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel style="font-weight: bold" value="Date Created: "/>
                    <h:outputText value="#{sfUpdateManagerBean.selectedSF.getFormattedDay()}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel style="font-weight: bold" value="Personal: "/>
                    <h:outputLabel value="#{sfUpdateManagerBean.selectedSF.staff.fullName}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>

                    <h:outputLabel style="font-weight: bold" value="Period to forecast: "/>
                    <h:outputText value="#{sfUpdateManagerBean.selectedSF.getForecastedPeriod()}"/>
                    <h:outputText value=""/>
                    <h:outputText value=""/>
                </h:panelGrid>
                <p:commandButton value="Update and Save" ajax="false" action="#{sfUpdateManagerBean.confirmUpdate}"/>
                <p:ajaxStatus style="width: 16px;height: 16px;">
                    <f:facet name="start">
                        <h:graphicImage value="./../images/ajaxloading.gif"/>
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value=""/>
                    </f:facet>
                </p:ajaxStatus>
            </p:panel>
        </h:form>
        <br/>
        <br/>
        <h:form id="upForm">
            <p:messages showDetail="true"/>
            <p:panel header="Options">
                <p:commandButton value="Calculate All" ajax="true" update="upForm" actionListener="#{sfUpdateManagerBean.calculateAll}"/>
            </p:panel>
            <c:forEach items="#{sfUpdateManagerBean.counterForProduct}" var="count">
                <div style="border:1px solid gray;width:720px;overflow-y:hidden;overflow-x:scroll;">
                    <div class="ui-datatable ui-widget">
                        <table border="1" summary="for product a">
                            <caption>
                                <div class="ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr">
                                    Sales Forecast for Product <h:outputText value="#{sfUpdateManagerBean.returnProductName(count)}"/>
                                </div>
                            </caption>

                            <thead>
                                <tr>
                                    <th class="ui-state-default" rowspan="2"></th>
                                    <th class="ui-state-default" colspan="6">Month</th>
                                    <th class="ui-state-default" rowspan="2">Options</th>
                                </tr>

                                <tr>
                                    <c:forEach items="#{sfUpdateManagerBean.labels}" var="lab">
                                        <th class="ui-state-default"><h:outputText value="#{lab}"/></th>
                                    </c:forEach>
                                </tr>
                            </thead>

                            <tbody class="ui-datatable-data">
                                <tr>
                                    <th class="ui-state-default" >Base Projection</th>
                                    <c:forEach items="#{sfUpdateManagerBean.selectedSF.returnProductIndivForecast(count).baseProjectionSelected}" var="item">
                                        <td><h:outputText value="#{item.longValue}"/></td>
                                    </c:forEach>
                                </tr>

                                <tr>
                                    <th class="ui-state-default" >Promotion</th>
                                    <c:forEach items="#{sfUpdateManagerBean.counter}" var="item">
                                        <td>
                                            <h:outputText value="#{sfUpdateManagerBean.promotions.get(count).get(item).l}" rendered="#{!sfUpdateManagerBean.renderProOrHAdj(item, count)}"/>
                                            <p:inputText value="#{sfUpdateManagerBean.promotions.get(count).get(item).l}" rendered="#{sfUpdateManagerBean.renderProOrHAdj(item, count)}"
                                                         required="true" requiredMessage="Promotion fields should not be left empty."/>
                                        </td>
                                    </c:forEach>
                                </tr>

                                <tr>
                                    <th class="ui-state-default" >Manual Adjustment</th>
                                    <c:forEach items="#{sfUpdateManagerBean.counter}" var="item">
                                        <td>
                                            <h:outputText value="#{sfUpdateManagerBean.humanAdjusts.get(count).get(item).l}" rendered="#{!sfUpdateManagerBean.renderProOrHAdj(item, count)}"/>
                                            <p:inputText value="#{sfUpdateManagerBean.humanAdjusts.get(count).get(item).l}" rendered="#{sfUpdateManagerBean.renderProOrHAdj(item, count)}"
                                                         required="true" requiredMessage="Promotion fields should not be left empty."/>
                                        </td>
                                    </c:forEach>
                                </tr>

                                <tr>
                                    <th class="ui-state-default" >Moving Average</th>
                                    <c:forEach items="#{sfUpdateManagerBean.counter}" var="item">
                                        <td><h:outputText value="#{sfUpdateManagerBean.newUpdateIndivs.get(count).movingAvgResult}" rendered="#{sfUpdateManagerBean.renderMovingAverage(item, count)}"/></td>
                                    </c:forEach>
                                    <td><p:commandButton image="ui-icon ui-icon-pencil" ajax="true" update="movAvgForm" onclick="movAvgDlg.show()" action="#{sfUpdateManagerBean.selectProduct(count)}"/></td>
                                </tr>

                                <tr>
                                    <th class="ui-state-default" >Final</th>
                                    <c:forEach items="#{sfUpdateManagerBean.newUpdateIndivs.get(count).finalValues}" var="item">
                                        <td><h:outputText value="#{item.longValue}"/></td>
                                    </c:forEach>
                                    <td><p:commandButton image="ui-icon ui-icon-refresh" ajax="true" update="upForm" action="#{sfUpdateManagerBean.calculateFinal(count)}"/></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <br/>
                <br/>
            </c:forEach>
        </h:form>
        <p:dialog widgetVar="movAvgDlg" id="movAvgDialog" header="Moving Average" showEffect="explode" hideEffect="explode" width="450">
            <h:form id="movAvgForm">
                <p:messages id="movAvgMsg" showDetail="true"/>
                <p:panel header="Moving Average Index">
                    <h:panelGrid columns="2">
                        <h:outputLabel style="font-weight: bold" value="n = "/>
                        <p:inputText value="#{sfUpdateManagerBean.newUpdateIndivs.get(sfUpdateManagerBean.selectedProductId).movingAvgIndexN}" 
                                     required="true" requiredMessage="You can not leave the index empty."/>

                        <h:outputLabel style="font-weight: bold" value="average = "/>
                        <h:outputText id="outputMovAvg" value="#{sfUpdateManagerBean.newUpdateIndivs.get(sfUpdateManagerBean.selectedProductId).movingAvgResult}"/>
                    </h:panelGrid>
                    <p:commandButton value="Calculate" ajax="true" update="upForm, outputMovAvg, refData, movAvgMsg" actionListener="#{sfUpdateManagerBean.calculateSelectedMovAvg}" oncomplete="handleMovAverageRequest(xhr, status, args)"/>
                    <p:commandButton value="Ok" update="upForm" onclick="movAvgDlg.hide()"/>
                    <p:dataTable id="refData" value="#{sfUpdateManagerBean.referencedActual}" var="aOne">
                        <f:facet name="header">  
                            Actual Sales Reference Table 
                        </f:facet>
                        <p:column headerText="Period">
                            <h:outputText value="#{aOne.label}"/>
                        </p:column>

                        <p:column headerText="Actual Sales">
                            <h:outputText value="#{aOne.value}"/>
                        </p:column>
                    </p:dataTable>
                </p:panel>
            </h:form>
        </p:dialog>
        <script>
            function handleMovAverageRequest(xhr, status, args) {  
                if(args.validationFailed || !args.isValid) {  
                    jQuery('#movAvgDialog').parent().effect("shake", { times:3 }, 100);  
                } else {  
                    //movAvgDlg.hide();  
                }  
            } 
        </script>
    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
